<template>
	<view>
		<uni-popup ref="comment" type="bottom">
			<view class="comment-box" @touchmove.stop.prevent="clear">
				<template v-if="true">

					<view class="flex flex-y-center fs-28" style="height: 100rpx;line-height: 40rpx;color: #333;">
						<view style="margin-left: 40rpx;">回复（{{info.comments || '0'}}）</view>
						<view style="margin-left: 48rpx;">赞（{{info.likes || '0'}}）</view>
					</view>

					<scroll-view @scrolltolower="next_list" style="height: 845rpx;" :scroll-y="true">

						<comment-list @changeValue="changeValue" @toOne="toOne" ref="clist" :shopId="info.shopId"
							:list="comment_list">
						</comment-list>
						<qq-loading @changeValue="changeValue" :show="qq_loading"></qq-loading>
						<qq-footer :show="is_null" :list="comment_list"></qq-footer>


					</scroll-view>


					<!-- 输入部分-->
					<view>
						<comment-input @add="add_comment" @changeValue="changeValue" :list="comment_list"
							@inputLike="inputLike" :info="info" ref="cinput"></comment-input>

					</view>
					<!-- 输入部分 -->



				</template>
				<template v-else></template>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "comment",
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				info: {
					image: [],
					id: '',
					detail: '',
				}, //帖子数据

				page: 1,
				pageSize: 20,
				comment_list: [],
				is_null: false,
				qq_loading: false,
			};
		},
		methods: {
			open(info) {
				console.log('info', info);
				if (info && info.id != this.info.id) {
					this.info = info;
					this.is_null = false;
					this.comment_list = [];
					this.page = 1;
					this.get_comment_list();
				}

				this.$refs.comment.open();
				this.$nextTick(() => {
					this.$refs.cinput.open({
						imId: '',
						userId: '',
						liked: info.liked,
					});
					this.$refs.clist.aid = this.info.id;
					// this.$refs.cinput.father = this;
				});

			},
			close() {
				this.$refs.comment.close();
			},
			inputLike(obj) {
				console.log('obj', obj);

				this.info.likes = this.info.likes + (obj.liked ? 1 : -1);
				this.info.liked = obj.liked;

				this.$emit('changeValue', {
					key: 'list',
					value: this.list
				});

			},
			add_comment() {

				this.info.comments = this.info.comments + 1;
				if (this.length > 0) {
					this.$emit('changeValue', {
						key: 'list',
						value: this.list
					});
				}
			},
			get_comment_list() {
				if (this.page == 1) {
					this.qq_loading = true;
				}
				this.request({
					url: '/zhoudao/zdAActivityUser/oneList',
					data: {
						pageSize: this.pageSize,
						pageNumber: this.page,
						activityId: this.info.id,
					}
				}).then(res => {
					this.qq_loading = false;
					if (!this.rsuccess(res, true)) return;
					if (this.page == 1) {


						this.comment_list = res.data;

					} else {
						if (this.page != 1) {
							let hasId = this.comment_list.map(val => val.id);
							res.data = res.data.filter(val => !hasId.includes(val.id));
						}
						this.comment_list = this.comment_list.concat(res.data);
					}
					if (res.data.length == 0) {
						this.is_null = true;
					}
					this.page = this.page + 1;

				});
			},
			next_list() {
				if (this.is_null) return;
				this.click(() => {
					this.get_comment_list();
				});
			},
			toOne(obj) {
				console.log('obj', obj)
				this.$refs.cinput.set_index(obj);
			},
		}
	}
</script>

<style>
	.comment-box {
		width: 100vw;
		background-color: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
	}
</style>
